<template>
  <!--pages/customerDetail/customerDetail.wxml-->
  <view id="customer-detail">
    <view class="detail-head">
      <view class="detail-main">
        <view class="main-top">
          <h5>
            发布人
          </h5>
        </view>
        <view class="main-bottom">
          <h3>{{singleCustomer.name}}</h3>
        </view>
      </view>
    </view>
    <view class="detail-head">
      <scroll-view scroll-y="true">
        <view class="detail-main">
          <view class="main-top">
            <h1>信息内容</h1>
          </view>
          <view class="main-bottom" style="margin-top: 20upx;font-size: 32upx;">
            <text>{{singleCustomer.content}}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="detail-time">
      <van-cell>
        <!-- 使用 title 插槽来自定义标题 -->
        <view slot="title">
          <view class="time-main">
            <span class="custom-title">发布时间</span>
            <span class="time-title">{{ singleCustomer.createdAt.split('T')[0]  }}</span>
          </view>
        </view>
      </van-cell>
    </view>
    <view class="operation">
      <van-button type="danger" block @click="deleteUser">
        删除信息
      </van-button>
    </view>
  </view>
</template>

<script>
import {showModal} from "../../static/utils";
import {reqDeleteNews} from "../../api/user";

export default {
  name: "userDetail",
  data () {
    return {}
  },
  methods: {
    deleteUser () {
      showModal({
        title: '删除信息',
        content: '确定删除此信息吗?',
        success: res => {
          if (res.confirm){
            reqDeleteNews({
              id: this.singleCustomer.id
            }).then(() => {
              uni.showToast({
                title: '删除成功!'
              })
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1
                })
              }, 1000)
            })
          }
        }
      })
    }
  },
  computed: {
    singleCustomer () {
      return this.$store.state.user.userDetail;
    }
  }
}
</script>

<style lang="less">
/* pages/customerDetail/customerDetail.wxss */
#customer-detail {
  background: #F2F2F2;
  min-height: 100vh;
}
#customer-detail .detail-head {
  padding: 0.8rem;
}
#customer-detail .detail-main {
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  padding: 1rem;
}
#customer-detail .detail-main .main-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
#customer-detail .detail-main .main-top image {
  width: 3.5rem;
  height: 3.5rem;
}
#customer-detail .detail-main .main-top h5 {
  font-size: 1rem;
  color: #73747A;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 600;
}
#customer-detail .detail-main .main-top h5 image {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  margin-top: 0rem;
}
#customer-detail .detail-main .main-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 3rem;
  font-size: 1rem;
  justify-content: space-between;
  width: 100%;
}
#customer-detail .detail-main .main-bottom h3 {
  width: 80%;
  overflow: hidden;
  text-overflow: clip;
  text-align: left;
  font-weight: 600;
}
#customer-detail .detail-main .main-bottom image {
  width: 1.3rem;
  height: 1.3rem;
  margin-right: 0.3rem;
  margin-top: 0.15rem;
}
#customer-detail .detail-set,
#customer-detail .detail-time {
  text-align: left;
}
#customer-detail .detail-set .van-cell,
#customer-detail .detail-time .van-cell {
  font-size: 15px;
}
#customer-detail .detail-set .time-title,
#customer-detail .detail-time .time-title {
  margin-left: 0.6rem;
}
#customer-detail .detail-time {
  margin-top: 0.8rem;
}
#customer-detail .operation {
  padding: 0.8rem;
}
/*# sourceMappingURL=home.css.map */
</style>